<template>
  <div class="flex-box">
    <div class="play-control">
      <el-button class="myicon" circle @click="previous">
        <i class="Wy-iconback"></i>
      </el-button>
      <el-button v-show="!playing" class="myicon" circle @click="play">
        <i class="Wy-iconplay"></i>
      </el-button>
      <el-button v-show="playing" class="myicon" circle @click="pause">
        <i class="Wy-iconpause"></i>
      </el-button>
      <el-button class="myicon" circle @click="next">
        <i class="Wy-iconforward"></i>
      </el-button>
    </div>

    <div class="play-slide">
      <div class="song-slider">
        <div class="current-box">{{current | timefilter}}</div>
        <el-slider
          class="song myslider"
          v-model="value1"
          @input="turnSong"
          @change="changeHandle"
          height="60px"
          :show-tooltip="false"
          :disabled="disabled"
          :step="0.1"
        ></el-slider>
        <div class="duration-box">{{duration | timefilter}}</div>
      </div>
      <div class="volume-slider">
        <div class="voice-icon" :class="[mutedflag?'Wy-iconmute':'Wy-iconvolume']" @click="muted"></div>
        <el-slider
          class="volume myslider"
          v-model="value2"
          height="60px"
          :show-tooltip="false"
          :max="1"
          :step="0.01"
          @input="turnVoice"
        ></el-slider>
      </div>
    </div>

    <div class="play-menu">
      <el-button>
        <i class="Wy-iconrepeat"></i>
      </el-button>
      <el-button class="loop-icon">
        <i class="Wy-iconmenu"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
const EVENT_NEXT = "next"
const EVENT_PREVIOUS = "previous"
const EVENT_PLAY = "play"
const EVENT_PAUSE = "pause"
const EVENT_SHOW = "show"
const EVENT_MUTED = "muted"
const EVENT_TURNVOICE = "turnvoice"
const EVENT_TRAGSONGSLIDER = "tragsongslider"
const EVENT_CHANGESONGSLIDER = "changesongslider"

export default {
  props: ['current', 'duration', 'value', 'playing'],
  data () {
    return {
      value2: 0.8,
      tempvioce: 0,
      mutedflag: false
    }
  },
  methods: {
    play () {
      if (this.duration) {
        this.$emit(EVENT_PLAY)
      }
    },
    pause () {
      this.$emit(EVENT_PAUSE)
    },
    next () {
      this.$emit(EVENT_NEXT)
    },
    previous () {
      this.$$emit(EVENT_PREVIOUS)
    },
    show () {
      this.$emit(EVENT_SHOW)
    },
    muted () {
      this.mutedflag = !this.mutedflag
      if (this.mutedflag == true) {
        this.tempvioce = this.value2
      }
      this.value2 = this.mutedflag ? 0 : this.tempvioce
      this.$emit(EVENT_MUTED, this.value2, this.mutedflag)
    },
    turnVoice (val) {
      this.$emit(EVENT_TURNVOICE, val)
    },
    turnSong (val) {
      this.$emit(EVENT_TRAGSONGSLIDER, val)
    },
    changeHandle (val) {
      this.$emit(EVENT_CHANGESONGSLIDER, val)
    }
  },
  computed: {
    disabled () {
      return this.duration ? false : true
    },
    value1: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('setVal', val)
      }
    }
  },
  filters: {
    timefilter (time) {
      if (typeof time === "number") {
        time = time > 10000 ? time / 1000 : time
        time = parseInt(time)
        let m = Math.floor(time / 60)
        m = m >= 10 ? m : `0${m}`
        let s = time - m * 60
        s = s >= 10 ? s : `0${s}`
        return `${m}:${s}`
      } else {
        return `00:00`
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '~common/styles/icon';

.flex-box {
  display: flex;
  justify-content: flex-start;
  height: 100%;

  .play-control {
    flex: 1 1 auto;

    .el-button {
      background-color: #e20d0f;
      border: 1px solid transparent;
      color: #fff;
      &:hover,
      &:focus {
        background-color: #c20c0c;
        color: #fff;
        border: 1px solid transparent;
      }
    }
  }

  .play-slide {
    flex: 16 1 auto;
    display: flex;

    .song-slider {
      flex: 6 1 auto;
      display: flex;

      .current-box {
        flex-basis: 30px;
        position: relative;
        left: 30px;
        top: 0;
      }
      .duration-box {
        flex-basis: 30px;
        position: relative;
        top: 0;
        right: 30px;
      }

      .song {
        flex: 1 1 auto;
      }
    }

    .volume-slider {
      flex: 1 1 auto;
      display: flex;
      .voice-icon {
        flex-basis: 30px;
        padding-top: 16px;
      }
      .volume {
        flex: 1 1 auto;
      }
    }
  }
  .play-menu {
    flex: 2 1 auto;
  }
}
</style>

<style lang="scss">
.el-slider {
  &.myslider {
    .el-slider__runway {
      cursor: default;
      width: 86%;
      margin: 22px auto;
      .el-slider__bar {
        background-color: red;
      }
      .el-slider__button-wrapper {
        width: 36px;
        height: 36px;
        top: -15px;
        outline: none;

        &.hover {
          cursor: pointer;
        }
        &.dragging {
          cursor: default;
        }
        .el-slider__button {
          width: 11px;
          height: 11px;
          border: 1px solid rgba(#000, 0.3);
          pointer-events: none;
          &.hover {
            transform: none;
            box-shadow: 1px 1px 5px rgba($color: #000000, $alpha: 0.6);
          }
          &.dragging {
            cursor: default;
            transform: none;
          }
          &::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            left: 45%;
            top: 45%;
          }
        }
      }
    }
  }
}
</style>